<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--图标-->
    <link rel="stylesheet" href="http://localhost:8080/tree/iconfont.css">

    <!--树-->
    <link rel="stylesheet" href="http://localhost:8080/tree/Aimara.css"/>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://localhost:8080/tree/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://localhost:8080/tree/jquery.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://localhost:8080/tree/bootstrap.min.js"></script>

    <style type="text/css">
        #propertyContainer {
            width: 430px;
            height: 300px;
            background: #F1F1F1;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            cursor: default;
            -moz-box-shadow: -1px 2px 8px #999 inset; /* For Firefox3.6+ */
            -webkit-box-shadow: -1px 2px 8px #999 inset; /* For Chrome5+, Safari5+ */
            box-shadow: -1px 2px 8px #999 inset; /* For Latest Opera */
            padding: 6px;
            margin-top: 10px;
        }

        #propertyValContainer {
            width: 430px;
            height: 300px;
            background: #F1F1F1;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            cursor: default;
            -moz-box-shadow: -1px 2px 8px #999 inset; /* For Firefox3.6+ */
            -webkit-box-shadow: -1px 2px 8px #999 inset; /* For Chrome5+, Safari5+ */
            box-shadow: -1px 2px 8px #999 inset; /* For Latest Opera */
            padding: 6px;
            margin-top: 10px;
        }

        .propertyName {
            font-size: 14px;
            margin: 2px;
            display: inline-block;
            margin-top: 6px;
            cursor: pointer;
        }

        .propertyName.selected {
            background-color: #428bca;
        }

        .propertyVal {
            font-size: 14px;
            margin: 2px;
            display: inline-block;
            margin-top: 6px;
            cursor: pointer;
        }

        .propertyVal.selected {
            background-color: #428bca;
        }

    </style>
    <script src="http://localhost:8080/tree/Aimara.js"></script>
    <script type="text/javascript">
        $(function () {
            //可以通过下面的方法来创建一个右键上下文菜单。
            var contex_menu = {
                'context': {
                    elements: [
                        {
                            text: '增加子类型',
                            icon: 'images/add1.png',
                            action: function (node) {
                                alert('增加子节点');
                            }
                        },
                        {
                            text: '删除',
                            icon: 'images/delete.png',
                            action: function (node) {
                                alert('删除类型');
                            }
                        }]
                }
            };
            //创建树结构
            tree = createTree('div_tree', 'rgb(241, 242, 247)', contex_menu, {
                onSelectNode: function (node) {
                    alert('seccess');
                    console.log(node);
                }
            });
            //创建树节点node1
            var node1 = tree.createNode('女装/男装/内衣', false, '&#xe635;', null,
                    null, 'context');
            //node1添加到树结构中
            node1.createChildNode('First child node', false, '&#x346d;',
                    null, 'context');
            //渲染树结构
            tree.drawTree();
            //创建第二个树节点
            node1 = tree.createNode('家电/数码/手机', false, '&#xe625;', null,
                    '节点1', 'context');
            node1.createChildNode('Second child node', false, '&#xe761;',
                    {a: 1, b: 2, c: [1, 2, 2, 3]}, 'context');
        })
    </script>
</head>
<body>

<i class="icon iconfont">&#xe635;</i>
<i class="icon iconfont">&#x346d;</i>
<i class="icon iconfont">&#xe625;</i>
<i class="icon iconfont">&#xe761;</i>
<i class="icon iconfont">&#xe60d;</i>
<i class="icon iconfont">&#xe615;</i>
<i class="icon iconfont">&#xe62a;</i>
<i class="icon iconfont">&#xe610;</i>
<br>
<br>
<br>
<br>


<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2">
            <div id="div_tree"></div>
        </div>
        <div class="col-lg-4">
            <div>
                <label for="propertyName">属性名</label>
                <input style="width:210px;display:inline-block;" type="text" class="form-control" id="propertyName"
                       placeholder="请填入属性名用以搜索或添加">
                <div style="display:inline-block;">
                    <button type="button" class="btn btn-success" id="addProperty">增加</button>
                    <button type="button" class="btn btn-danger" id="deleteProperty">删除</button>
                    <button type="button" class="btn btn-default" id="searchProperty">搜索</button>
                </div>
            </div>

            <!--TODO:使用niceScroll插件初始化，防止内容溢出-->
            <div id="propertyContainer">
                <span class="label label-default propertyName" onclick="changeLabelColor(this)">属性1</span>
                <span class="label label-default propertyName" onclick="changeLabelColor(this)">属性2</span>
                <span class="label label-default propertyName" onclick="changeLabelColor(this)">属性3</span>
                <span class="label label-default propertyName" onclick="changeLabelColor(this)">属性4</span>
                <span class="label label-default propertyName" onclick="changeLabelColor(this)">属性5</span>
                <span class="label label-default propertyName" onclick="changeLabelColor(this)">属性6</span>
                <span class="label label-default propertyName" onclick="changeLabelColor(this)">属性7</span>
                <span class="label label-default propertyName" onclick="changeLabelColor(this)">属性8</span>
                <!-- <span class="label label-primary">主要标签</span>
                <span class="label label-success">成功标签</span>
                <span class="label label-info">信息标签</span>
                <span class="label label-warning">警告标签</span>
                <span class="label label-danger">危险标签</span> -->
            </div>
        </div>
        <div class="col-lg-4">
            <div>
                <label for="propertyVal">属性值</label>
                <input style="width:210px;display:inline-block;" type="text" class="form-control" id="propertyVal"
                       placeholder="请填入属性值用以搜索或添加">
                <div style="display:inline-block;">
                    <button type="button" class="btn btn-success" id="addPropertyVal">增加</button>
                    <button type="button" class="btn btn-danger" id="deletePropertyVal">删除</button>
                    <button type="button" class="btn btn-default" id="searchPropertyVal">搜索</button>
                </div>
            </div>

            <!--TODO:使用niceScroll插件初始化，防止内容溢出-->
            <div id="propertyValContainer">
                <span class="label label-default propertyVal" onclick="changeValLabelColor(this)">属性1</span>
                <span class="label label-default propertyVal" onclick="changeValLabelColor(this)">属性2</span>
                <span class="label label-default propertyVal" onclick="changeValLabelColor(this)">属性3</span>
                <span class="label label-default propertyVal" onclick="changeValLabelColor(this)">属性4</span>
                <span class="label label-default propertyVal" onclick="changeValLabelColor(this)">属性5</span>
                <span class="label label-default propertyVal" onclick="changeValLabelColor(this)">属性6</span>
                <span class="label label-default propertyVal" onclick="changeValLabelColor(this)">属性7</span>
                <span class="label label-default propertyVal" onclick="changeValLabelColor(this)">属性8</span>
                <!-- <span class="label label-primary">主要标签</span>
                <span class="label label-success">成功标签</span>
                <span class="label label-info">信息标签</span>
                <span class="label label-warning">警告标签</span>
                <span class="label label-danger">危险标签</span> -->
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">

    var changeValLabelColor = function (target) {
        $('.propertyVal').removeClass('selected');
        $(target).addClass('selected');
    }

    var changeLabelColor = function (target) {
        $('.propertyName').removeClass('selected');
        $(target).addClass('selected');
    }
    $("#deleteProperty").click(function () {
        if ($('.propertyName.selected').length == 0) {
            alert("请选择属性");
        } else {
            //TODO:删除数据库对应信息
            $('.propertyName.selected').remove();
        }
    });
    //TODO:搜索按钮事件
    $("#addProperty").click(function () {
        var propertyName = $('#propertyName').val().trim();
        if (propertyName == "") {
            alert("请输入属性名");
        } else {
            //TODO:判断该属性名是否有重复
            $('#propertyContainer').append('<span class="label label-default propertyName" onclick="changeLabelColor(this)">' + propertyName + '</span>')
        }


    });


    /*tree = createTree('div_tree','white',contex_menu);
     tree.drawTree();
     //在树结构渲染之后实时添加一个树节点：
     tree.createNode('Real Time',false,'images/leaf.png',null,null,'context1');*/


    function alert(message) {
        if ($("#alert").length > 0) {
            clearTimeout(alertTimeout);
            $('#alert').remove();
        }
        $('body').prepend(
                '<div style="position:fixed;z-index:9999;width:100%;" class="alert alert-danger" id="alert">' +
                message +
                '</div>'
        );
        alertTimeout = setTimeout(closeAlert, 3000);
    }
    function closeAlert() {
        $('#alert').fadeOut();
    }

</script>
</body>
</html>